import React,{Component} from 'react';
import {Breadcrumb,Input,Button,notification,Select} from 'antd';
import service from '../lib/service';
const Option = Select.Option;

const points = [];
for(let i = 1; i <= 9; i++){
    points.push(<Option key={i}>{i}</Option>)
}

class GeneContrast extends Component{
    state={
        gene1:'',
        gene2:'',
        results:{
            g1:'',
            g2:'',
            maxPartition:0,
        }
    }

    handleCalculation(){
        let g1 = this.state.gene1;
        let g2 = this.state.gene2;
        let params = {g1:g1,g2:g2};
        service.geneContrast(params).then((res)=>{
            notification.success({
                key: '计算成功',
                message: "结果已计算完毕",
                description: '请查看..'
            });
            console.log(res.data)
            this.setState({results:res.data});
        }).catch((res)=>{
            console.log(res);
            // notification.error({
            //     key: 'error',
            //     message: '计算错误',
            //     description: res
            // });
        })
    }

    handleChangeGene1(e){
        
        this.setState({gene1:e.target.value})
    }
    handleChangeGene2(e){
        this.setState({gene2:e.target.value})
    }
    render(){
        return(
            <div style={{ background: '#fff', padding: 24, minHeight: 663 ,border:"1px solid #ececec"}}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                  <Breadcrumb.Item>动态规划</Breadcrumb.Item>
                  <Breadcrumb.Item>基因对比</Breadcrumb.Item>
              </Breadcrumb>
              <div className="main">
                <div className="problem-describe">
                    <h1>问题描述</h1>
                    <p className="problem-describe-text">基因序列比较 
人类基因由4种核苷酸，分别用字母ACTG表示。要求编写一个程序，按以下规划比较两个基因序列并确定它们的相似程度。即两给出两个基因序列AGTGATG和GTTAG，它们有多相似呢？测量两个基因的相似度一种方法称为对齐。使用对齐方法可以在基因的适当位置加入空格，让两个基因的长度相等，然后根据基因的分值矩阵计算分数。</p>                   
                </div>
                <div className="problem-reflection">
                    <h1>算法分析</h1>
                    <p className="problem-describe-text">基因序列填空问题，首先计算出最优分数矩阵，然后遍历字符串，从末尾开始，逐个判断何种匹配最优，然后组装字符串即可</p>
                </div>
                <div className="problem-solution">
                    <h1>解决方案</h1>
                    <p className="problem-describe-text">输入测试值(算法设计程序，未做容错处理)</p>
                    <div className="calculation">
                        基因串1:<Input onChange={(e)=>this.handleChangeGene1(e)}/>
                        基因串2:<Input onChange={(e)=>this.handleChangeGene2(e)}/> 
                        <Button style={{marginLeft:'20px'}} onClick={this.handleCalculation.bind(this)}>计算结果</Button>
                    </div> 
                    <div className="result">
                        <div>改变后的基因串</div>
                        <div>g1:{this.state.results.g1}</div>
                        <div>g2:{this.state.results.g2}</div>
                        <div>匹配分数:{this.state.results.maxPartition}</div>
                    </div>
                </div>
              </div>
            </div>
        )
    }
}


export default GeneContrast;